<template>
  <div>
    <el-container>
      <el-header class="header" height="36px">
        <page_title />
        <div class="aside-box">
          <el-input class="input" v-model="searchContent" placeholder="搜索" @change="getOrderList" clearable>
            <template #prefix>
              <i class="iconfont icon-search" />
            </template>
          </el-input>
        </div>
      </el-header>

      <el-main class="main-box">
        <el-table :data="orderData" highlight-current-row style="width: 100%" :row-style="{ height: '7.2vh' }">
          <el-table-column property="id" label="订单ID" width="200" align="center" />
          <el-table-column property="nickname" label="用户昵称" align="center" />
          <el-table-column property="totalFee" label="订单总价" align="center">
            <template #default="{ row }">
              {{ row.totalFee / 100 }}元
            </template>
          </el-table-column>
          <el-table-column property="status" label="状态" width="180" align="center">
            <template #default="{ row }">
              <span :style="{ color: getStatusStyle(row.status) }">{{ getStatusLabel(row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column property="createdAt" label="创建时间" width="220" align="center" />
          <el-table-column fixed="right" label="操作" width="240" align="center">
            <template #default="{ row }">
              <div class="operation-box">
                <el-button type="primary" size="small" plain @click="getOrderById(row.id)">查看</el-button>
                <el-button v-if="row.status === 1" type="success" size="small" plain
                  @click="shipToOrder(row.id)">发货</el-button>
                <el-button v-else-if="row.status === -2" type="danger" size="small" plain
                  @click="getOrderRefundById(row.id)">审核</el-button>
                <el-button type="info" size="small" plain>退单</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="dataTotal" :size="pageSize" :current="pageNo" @change="handlePageChange" />
      </el-main>
    </el-container>

    <div class="dialog-box">
      <el-dialog v-model="formDialogVisible" :title="formTitle" width="50%" center draggable>
        <el-form ref="formRef" label-width="auto" :model="formData">
          <el-form-item label="订单总价">
            <el-input v-model="formData.totalFee" disabled :formatter="(value) => (value / 100) + '元'" />
          </el-form-item>
          <el-form-item label="折扣(百分比)">
            <el-input v-model="formData.discountRate" disabled :formatter="(value) => value + '%'" />
          </el-form-item>
          <el-form-item label="下单时间">
            <el-input v-model="formData.createdAt" disabled />
          </el-form-item>
          <el-form-item label="支付时间" v-if="formData.status >= 1">
            <el-input v-model="formData.paymentTime" disabled />
          </el-form-item>
          <el-form-item label="发货时间" v-if="formData.status >= 2">
            <el-input v-model="formData.shipTime" disabled />
          </el-form-item>
          <el-form-item label="收货时间" v-if="formData.status >= 3">
            <el-input v-model="formData.receiveTime" disabled />
          </el-form-item>
          <el-form-item label="评价时间" v-if="formData.status >= 4">
            <el-input v-model="formData.evaluateTime" disabled />
          </el-form-item>
          <el-form-item label="取消时间" v-if="formData.cancelTime != null">
            <el-input v-model="formData.cancelTime" disabled />
          </el-form-item>
          <el-form-item label="申请退单时间" v-if="formData.refundRequestTime != null">
            <el-input v-model="formData.refundRequestTime" disabled />
          </el-form-item>
          <el-form-item label="申请退单理由" v-if="formData.refundReason != null">
            <el-input v-model="formData.refundReason" disabled />
          </el-form-item>
          <el-form-item label="退单审核时间" v-if="formData.refundAuditTime != null">
            <el-input v-model="formData.refundAuditTime" disabled />
          </el-form-item>
          <el-form-item label="退单是否通过" v-if="formData.refundAuditResult != null">
            <el-input v-model="formData.refundAuditResult" disabled
              :formatter="(value) => value === 1 ? '通过' : '不通过'" />
          </el-form-item>
        </el-form>
      </el-dialog>

      <div class="audit-dialog-box">
        <el-dialog v-model="auditFormDialogVisible" :title="auditFormTitle" width="40%" center draggable>
          <el-form ref="formRef" label-width="auto" :model="auditFormData">
            <el-form-item label="订单总价">
              <el-input v-model="auditFormData.totalFee" disabled :formatter="(value) => (value / 100) + '元'" />
            </el-form-item>
            <el-form-item label="下单时间">
              <el-input v-model="auditFormData.createdAt" disabled />
            </el-form-item>
            <el-form-item label="申请退单时间">
              <el-input v-model="auditFormData.refundRequestTime" disabled />
            </el-form-item>
            <el-form-item label="申请退单理由">
              <el-input v-model="auditFormData.refundReason" disabled />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="footer">
              <el-button @click="handleRefund(false)">拒绝</el-button>
              <el-button class="button" color="#53BEC9" @click="handleRefund(true)">同意</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import page_title from '@/components/page_title.vue';
import pagination from '@/components/pagination.vue';

onMounted(() => {
  getOrderList()
})

// 搜索内容
const searchContent = ref('');

// 定义响应式字段长度
const columnLength = ref(240);
columnLength.value = window.innerWidth * 0.3;

// 表格数据相关字段
const orderData = ref([]);
const dataTotal = ref(0);
const pageNo = ref(1);
const pageSize = ref(10);
// 获取数据
import { getOrderListService } from '@/api/order';
const getOrderList = async () => {
  let orderQuery = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    orderId: searchContent.value
  }
  const res = await getOrderListService(orderQuery)
  if (res.code === 0) {
    orderData.value = res.data.list
    dataTotal.value = parseInt(res.data.total)
  }
}
// 订单状态映射
const orderStatus = ref([
  { value: 0, label: '待支付', color: '#909399' },
  { value: 1, label: '已支付', color: '#e6a23c' },
  { value: 2, label: '已发货', color: '#409eff' },
  { value: 3, label: '已收货', color: '#67c23a' },
  { value: 4, label: '已评价', color: '#c0c4cc' },
  { value: -1, label: '取消订单', color: '#bfbfbf' },
  { value: -2, label: '申请退单', color: '#f56c6c' },
  { value: -3, label: '管理员退单', color: '#bfbfbf' }
])
// 订单状态转换
const getStatusLabel = (status) => {
  return orderStatus.value.find(item => item.value === status).label
}
// 订单状态
const getStatusStyle = (status) => {
  return orderStatus.value.find(item => item.value === status).color
}

// 表单内容相关
const formTitle = ref('订单详情')
const formDialogVisible = ref(false)
const formData = ref({})

// 打开对话框
const openDialogVisible = () => {
  formDialogVisible.value = true
}

// 根据订单id获取订单详情
import { getOrderByIdService, handleOrderShipService } from '@/api/order';
const getOrderById = async (orderId) => {
  const res = await getOrderByIdService(orderId)
  if (res.code === 0) {
    formData.value = res.data
    openDialogVisible()
  } else {
    ElMessage.error(res.msg)
  }
}
// 处理订单发货
const shipToOrder = async (orderId) => {
  const res = await handleOrderShipService(orderId)
  if (res.code === 0) {
    ElMessage.success('发货成功')
    getOrderList()
  } else {
    ElMessage.error(res.msg)
  }
}

// 审核表单内容相关
const auditFormTitle = ref('退单审核')
const auditFormDialogVisible = ref(false)
const auditFormData = ref({})
const auditOrderId = ref('')

// 打开对话框
const openAuditDialogVisible = () => {
  auditFormDialogVisible.value = true
}

// 根据订单id获取退单详情
const getOrderRefundById = async (orderId) => {
  const res = await getOrderByIdService(orderId)
  if (res.code === 0) {
    auditFormData.value = res.data
    auditOrderId.value = res.data.id
    openAuditDialogVisible()
  } else {
    ElMessage.error(res.msg)
  }
}

// 处理退单
import { auditRefundOrderService } from '@/api/order';
const handleRefund = async (result) => {
  const res = await auditRefundOrderService(auditOrderId.value, result)
  if (res.code === 0) {
    ElMessage.success(res.message)
    getOrderList()
  } else {
    ElMessage.error(res.msg)
  }
  auditFormDialogVisible.value = false
}

watch(() => pageNo.value, () => {
  getOrderList()
})

// 分页逻辑处理
const handlePageChange = (page) => {
  pageNo.value = page
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
}

.aside-box {
  display: flex;
  align-items: center;

  .button {
    margin-right: 10px;
    color: #fff;
    border-radius: 6px;
  }

  .input {
    width: 220px;
  }
}

.main-box {
  .switch-status {
    margin-right: 1vw;
    --el-switch-on-color: #67cad6;
  }

  .operation-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .operation {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

.dialog-box {
  :deep(.el-dialog) {
    --el-dialog-margin-top: 6vh;
    margin-bottom: 0;
  }

  :deep(.el-dialog__body) {
    padding: 0 10%;
  }

  :deep(.el-dialog__footer) {
    display: flex;
    justify-content: center;
  }
}

.audit-dialog-box {
  :deep(.el-dialog) {
    --el-dialog-margin-top: 22vh;
  }

  .footer {
    width: 40%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 2%;

    .button {
      color: #fff;
    }
  }
}
</style>
